<template>
	<view>
		<view>
			<view class="page-width">
				<app-search-for :value="value"></app-search-for>
			</view>
			<!-- 上下轮播 -->
			<!-- <swiper class="swiper" circular vertical :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item">
						<image class="image" src="/static/image/icon/icon-timer-bg.png" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image class="image" src="/static/image/icon/icon-timer-bg.png" mode=""></image>
					</view>
				</swiper-item>
			</swiper> -->
			<!-- 首页十个频道随机抓取 -->
			<view class="navsten">
				<view class="navsten-one" v-for="(item,index) in navs" :key="index" @click="jump(item.url)">
					<image :src="item.icon_url" mode=""></image>
					<view class="">
						{{item.name}}
					</view>
				</view>
			</view>
			<!-- 直播好货快快抢 -->
			<view class="dichotomy">
				<view class="dichotomy-one" v-for="(item,index) in zhihaoq" :key="index" @click="jump(item.url)">
					<image :src="item.icon_url" mode=""></image>
				</view>
			</view>
			<!-- 全国实体店 -->
			<view class="dichotomy1">
				<view class="dichotomy1-one" v-for="(item,index) in entity" v-if="index < 2" :key="index"
					@click="jump(item.url)">
					<image :src="item.icon_url" mode=""></image>
				</view>
			</view>
			<view class="" v-if="navs1.length > 0">
				<!-- 218-28 -->
				<app-navigation-icon nextMargin="84rpx" :autoplay="false" navHeight="194" navMargin="20rpx auto"
					:navs="navs1" background="#f7f7f7" :scroll="true" :columns="4" :imgStyle="imgstyle" :rows="1">
				</app-navigation-icon>
			</view>
			<view class='activity'>
				<view class='assemble'>
					<swiper class="swiper" :indicator-dots="false" indicator-active-color="#fff" autoplay="true"
						circular="true" indicator-color="rgba(255,255,255,0.5)">
						<swiper-item v-for="(items,indexs) in zbanners" :key="indexs">
							<app-jump-button form :url="items.url">
								<image :src="items.icon_url" class="slide-image" />
							</app-jump-button>
						</swiper-item>
					</swiper>
				</view>
				<view class='listR'>
					<view class="listRt" v-for="(items,indexs) in ybanners" :key="indexs">
						<app-jump-button form :url="items.url">
							<image :lazy-load="true" :src="items.icon_url" class="slide-image" />
						</app-jump-button>
					</view>
				</view>
			</view>
			<!-- <view class="dichotomy1">
				<view class="dichotomy1-one" v-for="(item,index) in 2" :key="index">
					<image src="/static/image/icon/icon-timer-bg.png" mode=""></image>
				</view>
			</view> -->
			<!-- 四个商品左右滑动 -->
			<view class="">
				<view class="whole">
					{{navs2name}}
				</view>
				<!-- 228-28 -->
				<app-navigation-icon v-if="navs2.length > 0" :autoplay="false" navHeight="200" navMargin="20rpx auto"
					:navs="navs2" background="#f7f7f7" :scroll="true" :columns="4" :rows="1" :imgStyle="imgstyle1">
				</app-navigation-icon>
			</view>
			<view class="list-all">
				<u-indexware :value="list"></u-indexware>
				<!-- <view class="list-one">
					<view class="list-one-item" v-for="(item,index) in list" :key="index" @click="jump(item.url)">
						<image class="image" :src="item.icon_url" mode=""></image>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import appSearchFor from '../../components/page-component/app-search-for/app-search-for.vue'
	import appSwiper from '../../components/page-component/app-swiper/app-swiper.vue';
	import appNavigationIcon from '../../components/page-component/app-navigation-icon/app-navigation-icon.vue';
	import uIndexware from '../../components/page-component/u-goods-list/u-indexware.vue';
	export default {
		components: {
			appSearchFor,
			appSwiper,
			appNavigationIcon,
			uIndexware
		},
		data() {
			return {
				value: {
					background: `#F7F7F7`,
					color: '#FFFFFF',
					placeholder: '搜索',
					radius: 15,
					textColor: '#c0c0c0',
					textPosition: `center`,
					shadow: `0 16rpx 32rpx rgba(0, 0, 0, 0.1);`
				},
				navs: [],
				imgstyle: "width: 160rpx;height: 160rpx",
				// imgstyle1: "width: 164rpx;height: 200rpx",
				imgstyle1: "width: 180rpx;height: 180rpx",
				zhihaoq: [],
				entity: [],
				navs1: [],
				zbanners: [],
				ybanners: [],
				navs2name: '',
				navs2: [],
				list: [],
				page: 1,
				page_count: 1
			}
		},
		onLoad(options) {
			this.navsReq()
			if (options.title) {
				uni.setNavigationBarTitle({
					title: options.title
				})
			}
		},
		methods: {
			jump(url) {
				if (url == '' || url == 'javascript:;' || url == '/') {
					return
				}
				if (url.indexOf('/pages/gospeed/index') != -1 || url == '/pages/index/index' || url ==
					'/pages/sixty/index' || url == '/pages/user-center/user-center' || url == '/pages/store/mine/mine') {
					uni.reLaunch({
						url: url
					})
					return
				}
				uni.navigateTo({
					url: url
				})
			},
			navsReq() {
				this.$showLoading();
				let qdata = {
					id: 36
				}
				this.$request({
					url: this.$api.navs.index,
					data: qdata
				}).then((res) => {
					this.$hideLoading();
					if (res.code === 0) {
						// console.log(res.data.list[217].subnav.length > 0);
						this.navs2name = res.data.list[222].name
						// if (res.data.list[216].subnav.length > 0) {
						this.navs = res.data.list[216].subnav
						// } else if (res.data.list[217].subnav.length > 0) {
						this.zhihaoq = res.data.list[217].subnav
						// } else if (res.data.list[218].subnav.length > 0) {
						this.entity = res.data.list[218].subnav
						// } else if (res.data.list[219].subnav.length > 0) {
						this.navs1 = res.data.list[219].subnav
						// } else if (res.data.list[220].subnav.length > 0) {
						this.zbanners = res.data.list[220].subnav
						// } else if (res.data.list[221].subnav.length > 0) {
						this.ybanners = res.data.list[221].subnav
						// } else if (res.data.list[222].subnav.length > 0) {
						this.navs2 = res.data.list[222].subnav
						// }
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
					this.allReq()
				}).catch(() => {
					this.$hideLoading();
				})
			},
			allReq() {
				this.$request({
					url: this.$api.navs.list,
					data: {
						pid: 223,
						status: 1,
						limit: 10,
						page: this.page
					}
				}).then((res) => {
					if (res.code == 0) {
						this.list = this.list.concat(res.data.list)
						this.page_count = res.data.pagination.page_count
					}
				}).catch(() => {

				})
			},
		},
		onReachBottom() {
			if (this.page < this.page_count) {
				this.page++
				this.allReq()
			}
		}
	}
</script>

<style scoped lang="scss">
	.swiper {
		width: 100%;
		height: 200rpx;

		.swiper-item {
			width: 100%;
			height: 100%;

			.image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.navsten {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin: 24rpx 0;

		.navsten-one {
			width: 20%;
			text-align: center;

			// &+.navsten-one {
			margin-top: 12rpx;
			// }

			image {
				// width: 128rpx;
				// height: 128rpx;
				width: 148rpx;
				height: 148rpx;
				// height: 150rpx;
			}
		}
	}

	.dichotomy {
		width: 726rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin: 24rpx auto;
		justify-content: space-between;

		.dichotomy-one {
			// width: 228rpx;
			// height: 300rpx;
			width: 240rpx;
			height: 316rpx;
			// height: 168rpx;
			text-align: center;

			// &+.dichotomy-one {
			// 	border-left: 1rpx solid;
			// }

			image {
				width: 100%;
				height: 316rpx;
			}
		}
	}

	.dichotomy1 {
		width: 726rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin: 24rpx auto;
		justify-content: space-between;

		.dichotomy1-one {
			// width: 348rpx;
			// height: 270rpx;
			width: 360rpx;
			height: 280rpx;
			// height: 216rpx;
			text-align: center;

			// &+.dichotomy1-one {
			// 	border-left: 1rpx solid;
			// }

			image {
				width: 100%;
				height: 270rpx;
			}
		}
	}

	.activity {
		// width: 686rpx;
		// height: 396rpx;
		width: 726rpx;
		height: 432rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;

		.assemble {
			// width: 332rpx;
			width: 362rpx;
			height: 100%;

			.swiper {
				height: 100%;

				.slide-image {
					height: 100%;
				}
			}

			/* #ifdef MP-WEIXIN */
			.wx-swiper-dot {
				width: 20rpx;
				height: 4rpx;
				border-radius: 2rpx;

				margin-left: -6rpx;

				&.wx-swiper-dot-active {
					width: 40rpx;
				}
			}

			.wx-swiper-dots.wx-swiper-dots-horizontal {
				margin-bottom: 5rpx;
			}

			/* #endif */
		}

		.listR {
			width: 362rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.listRt {
				height: 216rpx;
				// height: 198rpx;

				// &+.listRt {
				// 	// height: 88rpx;
				// }

				.slide-image {
					height: 100%;
				}
			}
		}
	}

	.whole {
		width: 100%;
		height: 120rpx;
		text-align: center;
		line-height: 120rpx;
	}

	.list-all {
		margin: 24rpx auto;
	}

	.list-one {
		width: 720rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;

		.list-one-item {
			width: 350rpx;
			height: 250rpx;
			font-size: 28rpx;
			margin: 24rpx 0;
			// background-color: #55aaff;

			.image {
				width: 350rpx;
				height: 250rpx;
			}
		}
	}
</style>
